<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<link  type="text/css" href="/static/css/login.css" rel="stylesheet">
<title>注册</title>
</head>

<body class="login" >
<div class="login_m">
    <div class="login_logo"><img src="/static/images/logo.png" width="196" height="46"></div>
    <div class="login_boder reg_height">
        <div class="login_padding" id="login_model">
        <form id="reg_form" action="{:url('register')}" method="POST">
            <div class="phone">
                <h2>TELPHONE</h2>
                <label>
                    <input type="text" id="phone" name="phone" class="txt_input" placeholder="Your Telphone">
                </label>
                <span class="tspan"></span>
            </div>
            <div class="password">
                <h2>PASSWORD</h2>
                <label>
                    <input type="password" id="userpwd" name="pwd"  class="txt_input"  placeholder="the password">
                </label>
                <span class="pspan"></span>
            </div>
            <div class="verify" >
                <h2>CAPTCHA </h2>
                <label>
                    <input type="text"  id="verify" name="verify" class="verify_input"  placeholder="the captcha">
                    <img src="{:captcha_src()}" class="verify_img"  width="120px" height="40px"  onclick="this.src='{:captcha_src()}?tmp='+Math.random()">
                </label>
                <label>
                    <span class="vspan"></span>
                </label>
            </div>
            <div class="mobile">
                <h2>MOBiLECODE</h2>
                <label>
                    <input type="text"  id="mobile_code" name="mobile_code" class="verify_input"  placeholder="the mobile code">
                </label>
                <label>
                    <input id="zphone" class="mobile_button"  type="button" value=" 获取手机验证码 "   onClick="getMobileCode()">
                </label>
                <label>
                    <span class="mspan"></span>
                </label>
            </div>
            <div class="button">
                <label>
                    <a href="{:url('index')}">登&nbsp;陆&nbsp;</a>
                </label>
                <label>
                    <a  href="javascript:void(0);" id="button" class="sub_button">注&nbsp;册</a>
                </label>
                <label>
                    <span class="bspan">* 已有账号去登陆</span>
                </label>
            </div>
        </form>
        </div><!--login_padding  Sign up end-->     
    </div><!--login_boder end-->

<div class="copyrights">Collect from <a href="#" >#########</a></div>

</div><!--login_m end-->
<script type="text/javascript" src="/static/js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/myfunc.js"></script>
<script type="text/javascript" src="/static/js/login.js"></script>
<script>
$("#phone").blur(function(){
    checkPhone();
});    

$("#userpwd").blur(function(){
    checkPwd();
});

$("#verify").blur(function(){
    checkVerify();
});

$("#mobile_code").blur(function(){
    checkMobileCode();
})

//提交表单信息
$('#button').click(function(){
    var phone=checkPhone();
    if(!phone) return false;

    var pwd=checkPwd();
    if(!pwd) return false;

    var verify=checkVerify();
    if(!verify) return false;

    var mobile_code=checkMobileCode;
    if(!mobile_code) return false;

    $.ajax({
        type:"POST",
        url:"{:url('register')}",
        data:{'phone':phone,'pwd':pwd,'verify':verify,'mobile_code':mobile_code},
        dataType:"json",
        success:function(data){
            $('.bspan').html(data.msg);
            if(data.status==4){
                window.location.href="{:url('loginreg/login')}";
                return false;
            }else{
                return false;
            }
        }
    });
})

//获取手机验证码
function getMobileCode(){
    var phone=$("#phone").val();
    if(!phone) return false;

    var verify=checkVerify();
    if(!verify) return false;

    $.ajax({
        type:"POST",
        url:"{:url('getMobileCode')}",
        data:{'verify':verify,'phone':phone},
        dataType:"json",
        success:function(data){
            $('.mspan').html('* '+data.msg);
            if(data.code==2){
                remainTime();
                return true;
            }
        }
    });
    return true;
}

var iTime = 59;
var Account;

function remainTime(){
    $("#zphone").attr("disabled",true);        
    
    var iSecond,sSecond="",sTime="";
    
    if (iTime >= 0){
        iSecond = parseInt(iTime%60);
        sSecond = iSecond + "秒";
        sTime=sSecond;
        if(iTime==0){
            clearTimeout(Account);
            sTime='获取手机验证码';
            iTime = 59;
            $("#zphone").attr("disabled",false);  
        }else{
            Account = setTimeout("remainTime()",1000);
            iTime=iTime-1;
        }
    }else{
        sTime='没有倒计时';
    }
    $("#zphone").val(sTime);
}
</script>

</body>
</html>